<template>
    <div class="app-container">
      <!-- 查询表单 -->
      <el-form :model="queryParams" label-width="80px" inline>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态">
            <!-- <el-option label="全部" value=""></el-option> -->
            <el-option label="待审核" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核未通过" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 列表展示 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="taskName" label="任务名称" align="center" width="400" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="nickName" label="负责人" align="center"  width="180"></el-table-column>
        <el-table-column prop="startDate" label="开始时间" align="center" width="180"> </el-table-column>
        <el-table-column prop="lastEndDate" label="结束时间" align="center" width="180"> </el-table-column>
        <el-table-column prop="endDate" label="申请延长结束时间" align="center" width="180"> </el-table-column>
        <el-table-column prop="reason" label="延长原因" align="center" width="400" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-check"
              @click="auditSucc(scope.row)"
              v-show="scope.row.status==0"
            >同意
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-close"
              v-show="scope.row.status==0"
              @click="auditError(scope.row)"
            >拒绝
            </el-button>
          </template>
        </el-table-column>
        <!-- 其他列 -->
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import {
    selectAuditDefer,
    chgAuditStatus,
} from "@/api/pms/project/deferTask";
  export default {
    data() {
      return {
        // 总条数
        total: 0,
        queryParams: {
          status: '0',
          pageNum: 1,
          pageSize: 10,
        },
        tableData: [] // 这里应该填充你的列表数据
      };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
              this.selectAuditDeferList();  
        },
        selectAuditDeferList() {
            // 请求延长结束时间数据
            selectAuditDefer(this.queryParams).then(res => {
                this.tableData = res.rows;
                this.total = res.total;
            })
        },
        auditSucc(row) {
            let params = {};
            params.id = row.id;
            params.status = 1;
            this.$confirm('确定审核通过吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                chgAuditStatus(params).then(res=> {
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '审核成功'
                        });
                        
                    })
                }).catch(error => {
                  this.$message({
                    type: 'info',
                    message: '已取消'
                });
                });
            
        },
        auditError(row) {
            let params = {};
            params.id = row.id;
            params.status = 2;
            this.$confirm('确定拒绝申请吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                chgAuditStatus(params).then(res=> {
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '审核成功'
                        });
                        
                    })
                }).catch(error => {
                  this.$message({
                    type: 'info',
                    message: '已取消'
                });
                });
        },
    }
  };
  </script>
  
  <style scoped>
  /* 这里可以添加一些样式 */
  </style>